<!-- 商品详情页面 -->
<template>
  <div class=" bg-red-50">
    <!-- 面包屑导航条 -->
    <div>
      <div>
        <v-breadcrumbs class="text-xl" :items="items">
          <template v-slot:divider>
            <v-icon icon="mdi-chevron-right"></v-icon>
          </template>
        </v-breadcrumbs>
      </div>
    </div>
    <!-- 商品详情卡片 -->
    <div class="container">
      <!-- elevation3阴影 ;d-flex = dispaly:flex ;flex-row 横向排列 -->
      <v-card class="d-flex flex-row" width="600px" height="400px" elevation="3">
        <img class="align-self-center pl-5" :src="`http://127.0.0.1:8081${tableData.productImage}`">
        <v-card-text class="ml-3 mt-15">
          <div class="mb-1 text-2xl mb-4 font-bold">{{ tableData.productName }}</div>
          <div>
            <p class="zt zt-red" v-if="tableData.status === '强制下架'">{{ tableData.status }}</p>
            <p class="zt zt-blue" v-else-if="tableData.status === '已上架'">{{ tableData.status }}</p>
            <p class="zt zt-yellow" v-else-if="tableData.status === '待上架'">{{ tableData.status }}</p>
            <p class="zt zt-green" v-else>{{ tableData.status }}</p>
          </div>
          <div class="subtitle text-gray-400 mt-4 text-sm"> 标价 ￥{{ tableData.listPrice }} </div>
          <div class="subtitle text-rose-600 mt-2 text-xl"> 售价 ￥{{ tableData.sellPrice }} </div>
          <p class="mt-4 text-base">{{ tableData.productProfile }}</p>
        </v-card-text>
        <!-- 商品规格信息   -->
      </v-card>
      <v-card class="item" height="400px" width="450px">
        <v-card-text style="height:80px;padding: 9px;">
          <v-container fluid style="padding: 8px">
            <v-row>
              <v-col cols="11" class="d-flex justify-center">
                <v-card-title class="text-center text-2xl">商品规格</v-card-title>
              </v-col>
              <!-- 新增按钮 -->
              <v-col cols="1" class="d-flex justify-end">
                <v-btn class="mt-1.5" style="background-color:coral;color:#fff;
                  border-radius:10%;box-shadow: 3px 2px 1px rgba(0, 0, 0, 0.1);
                  width: 28px;height:32px" @click="showDialog = true">新增</v-btn>
              </v-col>
              <!-- 新增弹窗 -->
              <v-dialog persistent v-model="showDialog">
                <v-card class="mx-auto w-2/5 h-85">
                  <v-card-title>新增商品规格信息</v-card-title>
                  <v-card-text>
                    <v-container>
                      <v-text-field label="商品规格名称" v-model="form.spec" class="mx-auto w-80" required>
                      </v-text-field>
                      <v-text-field label="库存" v-model="form.stock" class="mx-auto w-80" required>
                      </v-text-field>
                    </v-container>
                  </v-card-text>
                  <v-card-actions>
                    <v-btn @click="insertProductSpec" class="text-blue-darken-1">确定</v-btn>
                    <v-btn @click="showDialog = false" class="text-blue-darken-1">取消</v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-row>
          </v-container>
        </v-card-text>
        <v-table fixed-header class="overflow-hidden" height="400px">
          <thead>
            <tr>
              <!-- 规格表表头 -->
              <th class="text-center">商品规格</th>
              <th class="text-center">库存</th>
              <th class="text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in SpecList" :key="item.name">
              <td :style="{ width: '190px' }" class="text-center">{{ item.spec }}</td>
              <td :style="{ width: '50px' }" class="text-center">{{ item.stock }}</td>
              <td :style="{ width: '90px' }">
                <v-container>
                  <!-- 两个v-col分别占据一半宽度 -->
                  <v-row>
                    <v-col cols="6">
                      <v-btn size="small" class="my-btn1" style="box-shadow:none;" @click="update(item)">修改</v-btn>
                    </v-col>
                    <v-col cols="6">
                      <v-btn size="small" class="my-btn2" style="box-shadow:none;" @click="deleteInfo(item.id)">删除</v-btn>
                    </v-col>
                  </v-row>
                </v-container>
              </td>
            </tr>
          </tbody>
        </v-table>
      </v-card>
    </div>
    <!-- 修改弹窗 -->
    <v-dialog persistent v-model="showDialogU">
      <v-card class="mx-auto w-2/5 h-85">
        <v-card-title>修改商品规格信息</v-card-title>
        <v-card-text>
          <v-container>
            <v-text-field label="商品规格名称" v-model="form.spec" class="mx-auto w-80" required>
            </v-text-field>
            <v-text-field label="库存" v-model="form.stock" class="mx-auto w-80" required>
            </v-text-field>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="updateProductSpec" class="text-blue-darken-1">确定</v-btn>
          <v-btn @click="showDialogU = false" class="text-blue-darken-1">取消</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 删除按钮弹窗 -->
    <v-dialog v-model="remove">
      <v-card persistent class="mx-auto w-1/5 h-50">
        <v-card-title class="text-h5">确认</v-card-title>
        <v-card-text>确定删除该商品规格吗？</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red-darken-1" variant="text" @click="remove = false"> 取消 </v-btn>
          <v-btn color="green-darken-1" variant="text" @click="deleteProductSpec()"> 确定 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 评论列表 -->
    <div class="table-container">
      <v-table fixed-header class="comment overflow-hidden" height="600px"><!-- 固定表头，密集显示 -->
        <thead>
          <tr>
            <!-- 表头 -->
            <th class="text-center">用户名</th>
            <th class="text-center">时间</th>
            <th class="text-center">评论</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in  CommentList " :key="item.name">
            <td class="text-center">{{ item.userName }}</td>
            <td class="text-center">{{ item.commentTime }}</td>
            <td>{{ item.commentContent }}</td>
          </tr>
        </tbody>
      </v-table>
    </div>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  data() {
    return {
      formInline: {// 存储数据
        productId: '',
      },
      showDialog: false,// 新增弹框控制
      showDialogU: false,// 修改弹框控制
      remove: false,// 删除弹框控制
      form: {// 表单数据
        id: '',
        spec: '',
        stock: '',
      },
      // 面包屑
      items: [
        {
          title: '首页',
          disabled: false,
        },
        {
          title: '商品管理',
          disabled: false,
        },
        {
          title: '商品详情',
          disabled: false,
        },
      ],
      SpecList: [],// 商品规格列表
      CommentList: [],// 评论列表
      tableData: [],// 接收后端数据
    }
  },
  mounted() {
    this.getProductId()
    this.getData()
  },
  methods: {
    getProductId() {
      var path = window.location.pathname
      this.formInline.productId = path.split( '/' )[ 3 ]
    },
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/business/selectProductDetailsByProductId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: this.formInline.productId,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.productInfo
          this.SpecList = res.data.data.productSpecList
          this.CommentList = res.data.data.commentInfoList
        }
      } )
    },
    // 新增商品规格
    insertProductSpec() {
      this.showDialog = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/insertProductSpec',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          productId: this.formInline.productId,
          spec: this.form.spec,
          stock: this.form.stock,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.getData()
        }
      } )
    },
    // 修改商品规格获取信息
    update( item ) {
      this.showDialogU = true
      this.form.id = item.id
      this.form.spec = item.spec
      this.form.stock = item.stock
    },
    // 修改商品规格
    updateProductSpec() {
      this.showDialogU = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/updateProductSpec',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          id: this.form.id,
          spec: this.form.spec,
          stock: this.form.stock,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.getData()
        }
      } )
    },
    // 删除商品规格获取信息
    deleteInfo( id ) {
      this.remove = true
      this.form.id = id
    },
    // 删除商品规格
    deleteProductSpec() {
      this.remove = false
      axios( {
        url: 'http://127.0.0.1:8081/api/business/deleteProductSpec',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "businessToken" ),
          id: this.form.id,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "businessToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/business/login' )
        } else {
          this.getData()
        }
      } )
    },
  },
}
</script>

<style>
img {
  width: 300px;
  height: 300px;
}

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.comment {
  width: 1130px;
  margin: 0 auto;
  border: 1px solid red;
  margin-bottom: 20px;
}

/* 按钮字体样式 */
.my-btn1 .v-btn__content {
  font-size: 12px;
  color: #1867C0;
}

.my-btn2 .v-btn__content {
  font-size: 12px;
  color: red;
}


.my-btn1 {
  border-width: 1px;
  text-align: center;
  font-size: "12px";

}

.my-btn2 {
  border-width: 1px;
  text-align: center;
  font-size: "12px";
}

.zt {
  margin-top: 10px;
  width: 60px;
  font-size: small;
  text-align: center;
}

.zt-red {
  border: 1px solid red;
  color: red;
}

.zt-blue {
  border: 1px solid skyblue;
  color: skyblue;
}

.zt-green {
  border: 1px solid yellowgreen;
  color: yellowgreen;
}

.zt-yellow {
  border: 1px solid orange;
  color: orange;
}

/* 设置 v-table 中的滚动条为透明 */
.v-table__wrapper::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}

.v-table__wrapper::-webkit-scrollbar-thumb {
  background-color: transparent;
}
</style>